<template>
  <div class="radio">
    <div
      class="panel"
      :style="{width:width,height:height}"
      @tap="changeRadio"
    >
      <div
        class="panel__wrapper"
        :style="{borderRadius:borderRadius}"
      >
        <div
          class="panel__wrapper--line"
          :class="{ transW: value }"
        />
      </div>
      <div
        class="panel__wrapper--circle"
        :class="{ trans: value }"
        :style="{width:circleWidth,height:circleWidth}"
      />
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
	name: "Radio",
	props: {
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false,
		},
		// 因为动态绑定问题不兼容rpx 以下值使用rpx  详情见https://www.jianshu.com/p/97dc7c4a5ebf
		width:{
			type:String,
			default:"80rpx"
		},
		height:{
			type:String,
			default:"30rpx"
		},
		circleWidth:{
			type:String,
			default:"40rpx"
		},
		borderRadius:{
			type:String,
			default:"16rpx"
		},
		// 默认选中还是未选中
		defaultValue:{
			type:Boolean,
			default:false
		}
	},
	data() {
		return {
			value: false,
			switch_status:false,
		};
	},
	beforeMount(){
		this.value = this.defaultValue;
	},
	methods: {
		changeRadio(){
			if(this.disabled){
				return;
			}
			if(this.switch_status){
				return;
			}
			this.switch_status = true;
			this.value = !this.value;
			setTimeout(()=>{
				this.$emit("change", this.value);
				this.switch_status = false;
			},300);
		},
	}
});
</script>

<style lang="scss" scoped>
.panel{
  width: 80rpx;
  height: 30rpx;
  position: relative;
}
.panel__wrapper {
  width: 100%;
  height: 100%;
  background: #151517;
  border-radius: 16rpx;
  overflow: hidden;
  &--line {
    width: 0%;
    height: 100%;
    background-color: #e31430;
    transition: width 0.3s ease-out 0.3s;
  }
  &--circle {
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    position: absolute;
    left: 80%;
    top: 50%;
    transform: translate(-170%, -50%);
    transition: transform 0.3s ease-out 0.3s;
  }
}
.trans {
  transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
.transW {
  width: 100%;
}
 .radio{
   width: 200rpx;
   display: flex;
   justify-content: flex-end;
 }
</style>
